<template>
  <div class="app-container">
    <div>
      <el-form class="my-form" :model="obj" label-position="right" label-width="8rem">
        <table width="100%" height="2200" border="1" align="center" cellpadding="1" cellspacing="1" class="table-form">
          <tr>
            <td colspan="2">部门名称:</td>
            <td colspan="4">{{ obj.departmentName }}</td>
          </tr>
          <tr>
            <td colspan="2">部门职能概述:</td>
            <td colspan="4">{{ obj.departmentSummarize }}</td>
          </tr>
          <tr>
            <td :rowspan="obj.currentRows">本年</td>
            <td rowspan="9">本年度部门预算收入</td>
            <td>总额（万元）</td>
            <td colspan="3">{{ obj.totalRevenue }}</td>
          </tr>
          <tr>
            <td>1. 财政拨款收入</td>
            <td colspan="3">{{ obj.allocateRevenue }}</td>
          </tr>
          <tr>
            <td>其中：一般公共预算</td>
            <td colspan="3">{{ obj.allocateRevenue1 }}</td>
          </tr>
          <tr>
            <td>政府性基金预算</td>
            <td colspan="3">{{ obj.allocateRevenue2 }}</td>
          </tr>
          <tr>
            <td>国有资本经营预算</td>
            <td colspan="3">{{ obj.allocateRevenue3 }}</td>
          </tr>
          <tr>
            <td>2.财政专户管理资金</td>
            <td colspan="3">{{ obj.specialRevenue }}</td>
          </tr>
          <tr>
            <td>3.事业收入</td>
            <td colspan="3">{{ obj.businessRevenue }}</td>
          </tr>
          <tr>
            <td>4.经营收入</td>
            <td colspan="3">{{ obj.engageRevenue }}</td>
          </tr>
          <tr>
            <td>5.其他收入</td>
            <td colspan="3">{{ obj.otherRevenue }}</td>
          </tr>
          <tr>
            <td :rowspan="kpiCurrent.length + 1">年度目标</td>
            <td>部门整体支出目标</td>
            <td>关键指标</td>
            <td colspan="2">预期实现值</td>
          </tr>
          <tr>
            <td :rowspan="kpiCurrent.length - 1">{{ obj.targetThree }}</td>
            <template v-if="kpiCurrent[0]">
              <td>{{ kpiCurrent[0].performance }}</td>
              <td colspan="2">{{ kpiCurrent[0].expect }}</td>
            </template>
          </tr>
          <template v-for="(item,index) in kpiCurrent" :key="index">
            <tr v-if="index > 0">
              <td v-if="index === kpiCurrent.length - 1">其中：部门年度整体预算完成率：{{ obj.targetRateCurrent }}%</td>
              <td>{{ item.performance }}</td>
              <td colspan="2">{{ item.expect }}</td>
            </tr>
          </template>
          <tr>
            <td width="15%">年度主要支出计划（对应任务、政策）</td>
            <td width="20%">任务（政策）的绩效目标</td>
            <td>任务（政策）关键性指标（产出、效益、公众满意度方面）</td>
            <td>绩效标准（指标解释及预期实现值）</td>
            <td>主要实施项目（项目名称）</td>
          </tr>
          <template v-for="(item,index) in planCurrent" :key="index">
            <tr>
              <td :rowspan="item.indexsNum1">{{ item.planContent }}</td>
              <td :rowspan="item.indexsNum1">{{ item.planKpi }}</td>
              <template v-if="item.planContents && item.planContents[0]">
                <td>{{ item.planContents[0].planKpi }}</td>
                <td>{{ item.planContents[0].planKpiContent }}</td>
              </template>
              <td :rowspan="item.indexsNum1">{{ item.planItem }}</td>
            </tr>
            <template v-for="(item1,index1) in item.planContents" :key="index1">
              <tr v-if="index1 > 0">
                <td>{{ item1.planKpi }}</td>
                <td>{{ item1.planKpiContent }}</td>
              </tr>
            </template>
          </template>

          <!--三年期-->

          <tr>
            <td :rowspan="obj.thirdRows">三年期</td>
          </tr>
          <tr>
            <td :rowspan="kpiThree.length + 1">年度目标</td>
            <td>部门整体支出目标</td>
            <td>关键指标</td>
            <td colspan="2">预期实现值</td>
          </tr>
          <tr>
            <td :rowspan="kpiThree.length - 1">{{ obj.targetCurrent }}</td>
            <template v-if="kpiThree[0]">
              <td>{{ kpiThree[0].performance }}</td>
              <td colspan="2">{{ kpiThree[0].expect }}</td>
            </template>
          </tr>
          <template v-for="(item,index) in kpiThree" :key="index">
            <tr v-if="index > 0">
              <td v-if="index === kpiThree.length - 1">其中：部门年度整体预算完成率：{{ obj.targetRateThree }}%</td>
              <td>{{ item.performance }}</td>
              <td colspan="2">{{ item.expect }}</td>
            </tr>
          </template>
          <tr>
            <td>三年期主要支出计划（对应任务、政策）</td>
            <td>任务（政策）的绩效目标</td>
            <td>任务（政策）关键性指标（产出、效益、公众满意度方面）</td>
            <td>绩效标准（指标解释及预期实现值）</td>
            <td>主要实施项目（项目名称）</td>
          </tr>
          <template v-for="(row,index) in planThree" :key="index">
            <tr>
              <td :rowspan="row.indexsNum2">{{ row.planContent }}</td>
              <td :rowspan="row.indexsNum2">{{ row.planKpi }}</td>
              <template v-if="row.planContents && row.planContents[0]">
                <td>{{ row.planContents[0].planKpi }}</td>
                <td>{{ row.planContents[0].planKpiContent }}</td>
              </template>
              <td :rowspan="row.indexsNum2">{{ row.planItem }}</td>
            </tr>
            <template v-for="(row1,index1) in row.planContents" :key="'index1-'+index+'-'+index1">
              <tr v-if="index1 > 0">
                <td>{{ row1.planKpi }}</td>
                <td>{{ row1.planKpiContent }}</td>
              </tr>
            </template>
          </template>
          <tr>
            <td rowspan="4">其他需要说明的情况</td>
            <td rowspan="4" colspan="5">{{ obj.others }}</td>
          </tr>
        </table>
      </el-form>
      <div class="btns">
        <el-button type="primary">导出</el-button>
        <el-button type="primary">打印</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import {doGet} from '@/config/http'
import {getListPageSize, svc} from "@/config/common";
import {ref, watch} from 'vue'

const props = defineProps({
  departmentPerformanceId: {
    required: true,
    type: String,
  },
})
// let rowNum1 = ref(27)
// let rowNum2 = ref(19)
const emptyObj = {
  currentRows: 27,
  thirdRows: 19,
  allocateRevenue: '', // 财政拨款收入
  allocateRevenue1: '',// 一般公共预算
  allocateRevenue2: '', // 政府性基金预算
  allocateRevenue3: '',	 // 国有资本经营预算
  businessRevenue: '',	 // 事业收入
  createBy: '',	 // 创建人用户ID
  createTime: '',	 // 创建时间
  deleted: '',	 // 删除标识：0未删除、1已删除
  departmentPerformanceType: '',	// 部门绩效类型 区分一上编制还是二上编制
  departmentName: '',	 // 部门名称
  departmentSummarize: '',	// 部门职能概述
  engageRevenue: '', // 经营收入
  id: '',	// 主键ID
  otherRevenue: '',	// 其他收入
  others: '',	// 其他需要说明的情况
  specialRevenue: '',	// 财政专户管理资金
  targetCurrent: '',	// 部门整体支出目标（本年）
  targetRateCurrent: '',	// 部门年度整体预算完成率（本年）
  targetRateThree: '',	// 部门年度整体预算完成率（三年期）
  targetThree: '',	// 部门整体支出目标（三年期）
  totalRevenue: '',	 // 本年度部门预算收入（总额）
  updateBy: '',	// 最后修改人用户ID
  updateTime: '',	// 最后修改时间
  version: '',	// 数据版本
  year: '', // 年度
}
let obj = ref(Object.assign({}, emptyObj))
let kpiCurrent = ref([])
let kpiThree = ref([])
let planCurrent = ref([])
let planThree = ref([])


watch(() => props.departmentPerformanceId, async val => {
  if (val) {
    console.debug('val---------------------', val)
    await initIdData(val)
  }
}, {immediate: true})

async function initIdData(id) {
  obj.value = await doGet(svc, '/department-performance/' + id, {}, false)
  let p2 = doGet(svc, '/department-performance-kpi/page', {
    departmentPerformanceId: obj.value.id,
    pageSize: getListPageSize()
  }, false)
  let p3 = doGet(svc, '/department-performance-plan/page', {
    departmentPerformanceId: obj.value.id,
    pageSize: getListPageSize()
  }, false)
  let resArray = await Promise.all([p2, p3])
  if (resArray[0]['records'].length > 0) {
    let oKpis = resArray[0]['records'].reverse()
    kpiCurrent.value = oKpis.filter(item => item.departmentPerformanceKpiType === '0')
    kpiThree.value = oKpis.filter(item => item.departmentPerformanceKpiType === '1')
    console.debug('kpiThree', kpiThree.value)
  }

  if (resArray[1]['records'].length > 0) {
    let plans = resArray[1]['records'].reverse()
    planCurrent.value = plans.filter(item => item.departmentPerformancePlanType === '0')
    planThree.value = plans.filter(item => item.departmentPerformancePlanType === '1')
  }

  let p4 = await doGet(svc, '/department-performance-plan-content/page', {
    departmentPerformanceId: obj.value.id,
    pageSize: getListPageSize()
  }, false)
  if (p4['records'].length > 0) {
    let oPlanContents = p4['records'].reverse()
    planCurrent.value = planCurrent.value.map(item => {
      item.planContents = oPlanContents.filter(item1 => item1.departmentPerformancePlanId === item.id)
      item.indexsNum1 = item.planContents.length
      return item
    })
    console.debug('planCurrent', planCurrent.value)
    planThree.value = planThree.value.map(item => {
      item.planContents = oPlanContents.filter(item1 => item1.departmentPerformancePlanId === item.id)
      item.indexsNum2 = item.planContents.length
      return item
    })
  }
}
</script>
<style>
.endStyle {
  display: flex;
  align-items: center;
  justify-content: center;
}

.endStyle .el-input {
  border: none !important;
  resize: none !important;
  outline: none !important;
}

.endStyle .el-input__inner {
  width: 40px !important;
  /* pointer-events: none; */
  border: none !important;
  resize: none !important;
  outline: none !important;
  border-radius: 0 !important;
  /* border-bottom: 1px solid var(--el-border-color) !important; */

}

.textarea-1 .el-textarea__inner {
  /* pointer-events: none; */
  border: none !important;
  resize: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.form-table-textarea .el-form-item__content {
  /* width: 100%; */
  padding: 0;
  margin-left: 0 !important;
}
</style>
<style scoped>
td {
  padding: 10px 0;
}

.table-form {
  border-collapse: collapse;
  text-align: center;
}

.el-popper {
  overflow: hidden;
}

.form-list-content-1 .el-form-item__label {
  width: 11.25rem !important;
}

.table-form .form-table-textarea {
  margin-bottom: 0 !important;
}

.textarea-1 .el-textarea__inner {
  /* pointer-events: none; */
  border: none !important;
  resize: none !important;
  outline: none !important;
  border-radius: 0 !important;
}

.btns {
  margin: 1.875rem 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-show-per {
  display: flex;
  align-items: center;
}

.project-show {
  margin-left: 20px;
}

.project-show-title {
  color: #337ecc;
  padding-left: 10px;
}

.indexs {
  display: flex;
  flex-wrap: wrap;
}

.index-list {
  margin: 0 20px
}

.index-list h3 {
  font-weight: bold;
  /* text-align: center; */
}

.content-per {

}

.index-list-content {
  display: flex;
  align-items: center;
}

.content-text {
  width: 300px;
  /* background: red; */
}

.index-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.query-per {
  display: flex;
  align-items: center;
}

.query-per .el-button {
  margin-left: 20px;
}
</style>
